<template>
	<view class="page">
		<view class="page-ctx">
			<view class="sec-box">
				<!-- 	<view class="page-title">
					景区门票
				</view> -->
				<view class="box-records">
					<!-- <recordsList :list="records" /> -->
					<view class="list">
						<view class="item " v-for="(item,index) in records" :key="index" @click="toDetail(item)">
							<view class="poster-box">
								<image :src="item.originalPic" mode="aspectFill"></image>
							</view>
							<view class="info-box">
								<view class="title ellipsis-1">
									{{item.title}}
								</view>
								<view class="desc-box">
									<view class="desc ellipsis-1">
										{{item.jianjie}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

				<view class="load-more-box" style="margin-top: 50rpx;">
				<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
			</view>

			<w_fill_block height="60"></w_fill_block>


			<!-- 	<view class="empty-box" v-else>
				<w_empty></w_empty>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				id: '', //
				records: [],
				records_count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
			}
		},
		onLoad(option) {
			// this.id = option.id || '';
			this.setView();
		},
		onShow() {

		},
		onHide() {},
		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_records();
				}
			},
			initQuery() {
				this.records = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			setView() {
				this.query_records()
			},

			query_records() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'news_lists',
						channelId: 5,
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						// res.data.list.forEach(v => {
						// })
						this.records = this.records.concat(res.data.list);
						this.loadmore_status = res.data.count > this.records.length ? 'loadmore' : 'nomore';
						this.records_count = res.data.count;
					}
				})
			},


			toDetail(item) {
				this.toRoute({
					path: '/tip-detail',
					query: {
						id: item.id
					}
				})
			}


		}
	}
</script>


<style lang="scss">
	page {
		// background: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 32rpx;
	}


	.sec-box {
		margin-bottom: 40rpx;
	}


	.page-title {
		margin-bottom: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #000000;
	}

	.box-records {
		.list {
			.item {
				margin-bottom: 24rpx;
				// padding: 40rpx 24rpx;
				// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				height: 480rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;

				&:last-child {
					margin-bottom: 0;
				}

				.poster-box {
					width: 100%;
					height: 320rpx;

					image {
						width: 100%;
						height: 320rpx;
					}
				}

				.info-box {
					padding: 32rpx 24rpx;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
					}

					.desc-box {
						margin-top: 22rpx;

						.desc {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #B2AFC9;
						}
					}


				}
			}
		}
	}
</style>